<template>
  <el-card shadow="hover" class="p-6 rounded-2xl bg-white">
    <template #header>
      <div class="text-2xl font-semibold text-gray-800">优化步骤时间线</div>
    </template>
    <el-timeline class="ml-2">
      <el-timeline-item timestamp="步骤 1" color="#409EFF">
        <h4 class="text-lg font-semibold text-blue-600">级联逻辑代码的编写</h4>
        <ul class="list-disc list-inside text-gray-700 text-sm space-y-1">
          <li>表格外 → 外字段级联</li>
          <li>表格外 → 表格内字段</li>
          <li>表格内 → 表格内字段</li>
          <li>表格内 → 表格外字段</li>
          <li>组合级联（如出差时间）</li>
          <li>多个表格联动</li>
          <li>弹窗录入表格内容</li>
        </ul>
      </el-timeline-item>

      <el-timeline-item timestamp="步骤 2" color="#67C23A">
        <h4 class="text-lg font-semibold text-green-600">完善组件增强属性</h4>
        <ul class="list-disc list-inside text-gray-700 text-sm space-y-1">
          <li>下拉、单选、多选等增强配置</li>
          <li>上传、时间、日期组件优化</li>
          <li>输入框提示信息增强</li>
        </ul>
      </el-timeline-item>

      <el-timeline-item timestamp="步骤 3" color="#E6A23C">
        <h4 class="text-lg font-semibold text-yellow-600">配置页面开发</h4>
        <ul class="list-disc list-inside text-gray-700 text-sm space-y-1">
          <li>级联逻辑配置</li>
          <li>增强属性配置</li>
        </ul>
      </el-timeline-item>

      <el-timeline-item timestamp="步骤 4" color="#F56C6C">
        <h4 class="text-lg font-semibold text-red-500">组件二次封装</h4>
        <ul class="list-disc list-inside text-gray-700 text-sm space-y-1">
          <li>编辑/隐藏/禁用 控制</li>
          <li>各类表单字段封装</li>
          <li>组件性能优化</li>
        </ul>
      </el-timeline-item>

      <el-timeline-item timestamp="步骤 5" color="#909399">
        <h4 class="text-lg font-semibold text-gray-700">组件事件与逻辑配置</h4>
        <p class="text-gray-600 text-sm leading-relaxed">
          支持数十种业务逻辑事件，如打卡时间、预算计算、表格联动等。
        </p>
      </el-timeline-item>

      <el-timeline-item timestamp="步骤 6" color="#303133">
        <h4 class="text-lg font-semibold text-gray-800">风险处理与历史兼容</h4>
        <p class="text-gray-600 text-sm leading-relaxed">
          增加配置项控制新旧逻辑，确保历史数据流程兼容。
        </p>
      </el-timeline-item>
    </el-timeline>
  </el-card>
</template>

<script setup>
import { ElTimeline, ElTimelineItem, ElCard } from 'element-plus'
</script>

<style scoped>
</style>
